<template>
  <div>
    <el-drawer
      v-model="showSecurityIssues"
      title="主题设置"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <div class="personal-setting-content">
        <div class="info-item">
          <label class="info-label">主题色：</label>
          <div class="info-content">
            <Theme />
          </div>
        </div>
      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import { computed } from 'vue'


const props = defineProps({
  showDrawer: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:showDrawer'])
const showSecurityIssues = computed(()=>{return props.showDrawer})

const handleClose = () => {
  emits('update:showDrawer',false)
}
const cancelClick = () => {
  emits('update:showDrawer',false)
}
const confirmClick = () => {
  emits('update:showDrawer',false)
}
</script>
<style scoped lang='scss'>
.info-item{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  min-height: 32px;
  .info-label{
    width: 80px;
    color: #333;
  }
}
.personal-setting-title{
  height: 60px;
  font-size: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>